<div class="collections-selector" data-controller="collections-selector">
    <div hidden>
        <select
            id="collection-ids"
            name="collection_ids[]"
            multiple
            tabindex="-1"
            data-collections-selector-target="dataCollections"
        >
            <?php foreach ($form->collectionsValues() as $group_name => $collections): ?>
                <?php if ($group_name !== ''): ?>
                    <optgroup label="<?= protect($group_name) ?>">
                <?php endif; ?>

                <?php foreach ($collections as $collection): ?>
                    <option
                        value="<?= $collection->id ?>"
                        <?= $form->isCollectionSelected($collection) ? 'selected' : '' ?>
                        <?= $collection->is_public ? 'data-public' : '' ?>
                        data-illustration="<?= url_media('covers', $collection->image_filename, 'collection-card.png') ?>"
                    >
                        <?= protect($collection->name()) ?>
                    </option>
                <?php endforeach; ?>

                <?php if ($group_name !== ''): ?>
                    </optgroup>
                <?php endif; ?>
            <?php endforeach; ?>
        </select>

        <div data-collections-selector-target="dataNewCollections">
            <?php foreach ($form->new_collection_names as $name): ?>
                <input
                    type="hidden"
                    name="new_collection_names[]"
                    value="<?= protect($name) ?>"
                />
            <?php endforeach; ?>
        </div>
    </div>

    <div class="form-group" data-collections-selector-target="selectGroup">
        <label for="collections-selector-select">
            <?= _('Select a collection') ?>
        </label>

        <?php if ($form->isInvalid('collection_ids')): ?>
            <p id="collection-ids-error" class="form-group__error">
                <?= _('Error:') ?>
                <?= $form->error('collection_ids') ?>
            </p>
        <?php endif; ?>

        <?php if ($form->isInvalid('new_collection_names')): ?>
            <p class="form-group__error">
                <?= _('Error:') ?>
                <?= $form->error('new_collection_names') ?>
            </p>
        <?php endif; ?>

        <div class="form-group__stack">
            <select
                id="collections-selector-select"
                data-collections-selector-target="select"
                data-action="collections-selector#attach"
                <?php if ($form->isInvalid('collection_ids')): ?>
                    aria-errormessage="collection-ids-error"
                    aria-invalid="true"
                <?php endif; ?>
            ></select>

            <button type="button" data-action="collections-selector#showInput">
                <?= icon('plus') ?>
                <span class="no-mobile">
                    <?= _('New') ?>
                </span>
            </button>
        </div>
    </div>

    <div class="form-group" data-collections-selector-target="inputGroup" hidden>
        <label for="new-name">
            <?= _('What do you want to name the collection?') ?>
            <span class="label__help">
                <?= _f('(max. %d characters)', $form->collection_name_max_length) ?>
            </span>
        </label>

        <div class="form-group__stack">
            <input
                id="new-name"
                name=""
                type="text"
                maxlength="<?= $form->collection_name_max_length ?>"
                data-collections-selector-target="input"
            />

            <button type="button" data-action="collections-selector#attach">
                <?= icon('check') ?>
                <span class="no-mobile">
                    <?= _('Add') ?>
                </span>
            </button>

            <button type="button" data-action="collections-selector#showSelect" title="<?= _('Cancel the creation of the collection') ?>">
                <?= icon('times') ?>

                <span class="sr-only">
                    <?= _('Cancel') ?>
                </span>
            </button>
        </div>
    </div>

    <ul class="cards" data-collections-selector-target="collectionCards"></ul>

    <template data-collections-selector-target="collectionTemplate">
        <li class="card card--illustrated" style="background-image: url('<?= url_media('covers', '', 'collection-card.png') ?>');">
            <div class="card__body">
                <div class="card__title card__title-ellipsis" data-target="name">
                </div>

                <p class="card__text card__text--oneline">
                    <span class="card__ellipsis card__text--extend" data-target="by"></span>

                    <span class="sticker" data-target="isPublic"><?= _('public') ?></span>
                    <span class="sticker" data-target="isNew"><?= _('new') ?></span>
                </p>
            </div>

            <div class="card__footer card__footer--centered">
                <button
                    type="button"
                    data-action="collections-selector#detach"
                    data-target="unselect"
                >
                    <?= icon('times') ?>
                    <?= _('Unselect') ?>
                </button>
            </div>
        </li>
    </template>
</div>
